<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            let i = 1;
            $("#more").click(function(){
                let d = $("#d").clone(true);
                // 克隆的出来的元素的id属性值不能重复
                d.attr("id","d"+i);
                $("#more").before(d);

                // 克隆出来的div区域中的文件选择器内容必须为空
                // 默认情况下,克隆出来的文件选择器内容与被克隆的元素一致
                // 因此,需要清除克隆出来的文件选择器的内容
                $("#d"+i+" input").val("");
                i++;
            });
            $("a").click(function(){
                if($(this).parent().attr("id") != "d"){
                    $(this).parent().remove();
                }
            });
            $("#show").click(function(){
                // 此时在获取元素中文件的值的时候,只获取到第一个元素的文件名
                // console.log($("input[type='file']").val());
                // 如果想要获取所有的文件名,需要遍历所有匹配的元素
                // each(fn):遍历方法,遍历指定的元素
                // 参数是一个函数类型,该函数可以无参,也可以有参
                // 无参函数
                // $("input[type='file']").each(function(){
                //     // 在迭代语句中可以使用this关键字表示当前迭代的元素
                //     console.log($(this).val());
                // });

                // 单参数的函数:此时的参数表示当前迭代的元素的索引号
                // $("input[type='file']").each(function(index){
                //     console.log("索引号:"+index+",文件名:"+$(this).val());
                // });
                // 两个参数的函数
                // 第一个参数:表示索引号
                // 第二个参数:迭代的元素,此时的元素是一个DOM元素
                $("input[type='file']").each(function(i,e){
                    // console.log("索引号:"+i+",文件名:"+e.value);
                    console.log("索引号:"+i+",文件名:"+$(e).val());
                });
            });
        })
    </script>
</head>
<body>
<!--
    1.当点击上传更多的时候,页面中新增一个与原始div一致的区域,id不能重复
        区域仍然包含文件选择器与删除超链接
        如果文件选择器中存在内容后点击上传更多
        此时原来的文件选择器内容不变,新增的文件选择器是空的,没有选择任何内容
    2.点击删除时,删除所点超链接所在的div区域,但是原始id为d的div区域不能被删除
-->
<div id="d">
    <input type="file">
    <a href="javascript:;">删除</a>
</div>
<button id="more">上传更多</button>
<button id="show">显示文件名</button>
</body>
</html>